<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
            前端基础知识体系-JS-WEB-API(事件) |
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">前端基础知识体系-JS-WEB-API(事件)</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cheng5.du</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-05-10 10:11:57</span>
        <span class="mobile">2021-05-10 10:11</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JS/">JS</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JS-WEB-API/">JS-WEB-API</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><ol>
<li>事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。</li>
<li>事件是javaScript和DOM之间交互的桥梁。</li>
</ol>
<h3 id="事件绑定"><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h3><h4 id="DOM直接绑定"><a href="#DOM直接绑定" class="headerlink" title="DOM直接绑定"></a>DOM直接绑定</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span> <span class="attr">onClick</span>=<span class="string">&quot;alert(&#x27;DOM直接绑定&#x27;)&quot;</span>&gt;</span>click<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="JS中绑定"><a href="#JS中绑定" class="headerlink" title="JS中绑定"></a>JS中绑定</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>)</span><br><span class="line">btn.<span class="property">onClick</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123; <span class="title function_">alert</span>(<span class="string">&#x27;JS中绑定&#x27;</span>) &#125;</span><br></pre></td></tr></table></figure>

<h4 id="绑定事件监听函数"><a href="#绑定事件监听函数" class="headerlink" title="绑定事件监听函数"></a>绑定事件监听函数</h4><p>elementObject.addEventListener(eventName,handle,useCapture);</p>
<p>useCapture参数是用来指定事件捕获还是事件冒泡。true &#x3D;&gt; 捕获；false &#x3D;&gt; 冒泡。默认为false。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>)</span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123; <span class="title function_">alert</span>(<span class="string">&#x27;绑定事件监听函数&#x27;</span>) &#125;)</span><br></pre></td></tr></table></figure>

<h4 id="简易通用绑定函数"><a href="#简易通用绑定函数" class="headerlink" title="简易通用绑定函数"></a>简易通用绑定函数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">EventBind</span>(<span class="params">element, eventType, selector, fn</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span>(!fn) [selector, fn] = [<span class="literal">null</span>, selector] <span class="comment">// 三个参数是普通调用，四个参数是代理调用</span></span><br><span class="line">  element.<span class="title function_">addEventListener</span>(eventType, <span class="function"><span class="params">event</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> target = event.<span class="property">target</span></span><br><span class="line">    <span class="comment">// 使用call可以在事件绑定的回调函数里面使用this，但是需要注意的是回调函数不能用箭头函数！！！</span></span><br><span class="line">    <span class="keyword">if</span>(selector) &#123;</span><br><span class="line">       <span class="keyword">if</span> (target.<span class="title function_">matches</span>(selector)) fn.<span class="title function_">call</span>(target, event)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      fn.<span class="title function_">call</span>(target, event)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>)</span><br><span class="line"><span class="title class_">EventBind</span>(btn, <span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>) &#123; <span class="title function_">alert</span>(<span class="variable language_">this</span>.<span class="property">innerHTML</span>) &#125;)</span><br></pre></td></tr></table></figure>

<h3 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h3><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210514/event.1qatug31uj6o.jpg" alt="event"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">// 伪代码</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;wrap&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;parent&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> wrap = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;wrap&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> parent = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;parent&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>)</span><br><span class="line"></span><br><span class="line">wrap.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;外层冒泡&#x27;</span>) &#125;, <span class="literal">false</span>)</span><br><span class="line">parent.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;父级捕获&#x27;</span>) &#125;, <span class="literal">true</span>)<span class="comment">// useCapture为true，可以被捕获</span></span><br><span class="line">parent.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;父级冒泡&#x27;</span>) &#125;, <span class="literal">false</span>)</span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;目标捕获&#x27;</span>) &#125;, <span class="literal">true</span>) <span class="comment">// useCapture为true，可以被捕获</span></span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123; <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;目标冒泡&#x27;</span>) &#125;, <span class="literal">false</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// output</span></span><br><span class="line">父级捕获</span><br><span class="line">目标捕获</span><br><span class="line">目标冒泡</span><br><span class="line">父级冒泡</span><br><span class="line">外层冒泡</span><br></pre></td></tr></table></figure>

<h4 id="事件捕获"><a href="#事件捕获" class="headerlink" title="事件捕获"></a>事件捕获</h4><p>从DOM最外层一层层往里捕获事件，直到目标元素。</p>
<h4 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h4><p>从目标元素由内到外冒泡。</p>
<h3 id="事件委托-x2F-事件代理"><a href="#事件委托-x2F-事件代理" class="headerlink" title="事件委托&#x2F;事件代理"></a>事件委托&#x2F;事件代理</h3><p>事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。</p>
<h4 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;wrap&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> wrapEle = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.wrap&#x27;</span>)</span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> frag = <span class="variable language_">document</span>.<span class="title function_">createDocumentFragment</span>()</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">      <span class="keyword">let</span> ele = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;p&#x27;</span>)</span><br><span class="line">      ele.<span class="property">innerHTML</span> = <span class="string">`This is ele <span class="subst">$&#123;i&#125;</span>`</span></span><br><span class="line">      frag.<span class="title function_">appendChild</span>(ele)</span><br><span class="line">    &#125;</span><br><span class="line">    wrapEle.<span class="title function_">append</span>(frag)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(frag)</span><br><span class="line">  &#125;</span><br><span class="line">  wrapEle.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>.<span class="property">innerHTML</span>)</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure>

<h4 id="回调函数参数e"><a href="#回调函数参数e" class="headerlink" title="回调函数参数e"></a>回调函数参数e</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">MouseEvent</span>: &#123;</span><br><span class="line">  <span class="attr">altKey</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">bubbles</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">button</span>: <span class="number">0</span>,</span><br><span class="line">  <span class="attr">buttons</span>: <span class="number">0</span>,</span><br><span class="line">  <span class="attr">cancelBubble</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">cancelable</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">clientX</span>: <span class="number">63</span>,</span><br><span class="line">  <span class="attr">clientY</span>: <span class="number">104</span>,</span><br><span class="line">  <span class="attr">composed</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">ctrlKey</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">currentTarget</span>: <span class="literal">null</span>,</span><br><span class="line">  <span class="attr">defaultPrevented</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">detail</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">eventPhase</span>: <span class="number">0</span>,</span><br><span class="line">  <span class="attr">fromElement</span>: <span class="literal">null</span>,</span><br><span class="line">  <span class="attr">isTrusted</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">layerX</span>: <span class="number">63</span>,</span><br><span class="line">  <span class="attr">layerY</span>: <span class="number">104</span>,</span><br><span class="line">  <span class="attr">metaKey</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">movementX</span>: <span class="number">0</span>,</span><br><span class="line">  <span class="attr">movementY</span>: <span class="number">0</span>,</span><br><span class="line">  <span class="attr">offsetX</span>: <span class="number">55</span>,</span><br><span class="line">  <span class="attr">offsetY</span>: <span class="number">14</span>,</span><br><span class="line">  <span class="attr">pageX</span>: <span class="number">63</span>,</span><br><span class="line">  <span class="attr">pageY</span>: <span class="number">104</span>,</span><br><span class="line">  <span class="attr">path</span>: (<span class="number">6</span>) [p, div.<span class="property">wrap</span>, body, html, <span class="variable language_">document</span>, <span class="title class_">Window</span>],</span><br><span class="line">  <span class="attr">relatedTarget</span>: <span class="literal">null</span>,</span><br><span class="line">  <span class="attr">returnValue</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">screenX</span>: <span class="number">1429</span>,</span><br><span class="line">  <span class="attr">screenY</span>: <span class="number">68</span>,</span><br><span class="line">  <span class="attr">shiftKey</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">sourceCapabilities</span>: <span class="title class_">InputDeviceCapabilities</span> &#123;<span class="attr">firesTouchEvents</span>: <span class="literal">false</span>&#125;,</span><br><span class="line">  <span class="attr">srcElement</span>: p,</span><br><span class="line">  <span class="attr">target</span>: p,</span><br><span class="line">  <span class="attr">timeStamp</span>: <span class="number">5829.630000051111</span>,</span><br><span class="line">  <span class="attr">toElement</span>: p,</span><br><span class="line">  <span class="attr">type</span>: <span class="string">&quot;click&quot;</span>,</span><br><span class="line">  <span class="attr">view</span>: <span class="title class_">Window</span> &#123;<span class="attr">window</span>: <span class="title class_">Window</span>, <span class="attr">self</span>: <span class="title class_">Window</span>, <span class="attr">document</span>: <span class="variable language_">document</span>, <span class="attr">name</span>: <span class="string">&quot;&quot;</span>, <span class="attr">location</span>: <span class="title class_">Location</span>, …&#125;,</span><br><span class="line">  <span class="attr">which</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">x</span>: <span class="number">63</span>,</span><br><span class="line">  <span class="attr">y</span>: <span class="number">104</span>,</span><br><span class="line">  <span class="attr">__proto__</span>: <span class="title class_">MouseEvent</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="回调函数参数e-target"><a href="#回调函数参数e-target" class="headerlink" title="回调函数参数e.target"></a>回调函数参数e.target</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">accessKey</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">align</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">ariaAtomic</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaAutoComplete</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaBusy</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaChecked</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaColCount</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaColIndex</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaColSpan</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaCurrent</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaDescription</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaDisabled</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaExpanded</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaHasPopup</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaHidden</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaKeyShortcuts</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaLabel</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaLevel</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaLive</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaModal</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaMultiLine</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaMultiSelectable</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaOrientation</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaPlaceholder</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaPosInSet</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaPressed</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaReadOnly</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaRelevant</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaRequired</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaRoleDescription</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaRowCount</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaRowIndex</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaRowSpan</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaSelected</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaSetSize</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaSort</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaValueMax</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaValueMin</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaValueNow</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ariaValueText</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">assignedSlot</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">attributeStyleMap</span>: <span class="title class_">StylePropertyMap</span> &#123;<span class="attr">size</span>: <span class="number">0</span>&#125;</span><br><span class="line"><span class="attr">attributes</span>: <span class="title class_">NamedNodeMap</span> &#123;<span class="attr">length</span>: <span class="number">0</span>&#125;</span><br><span class="line"><span class="attr">autocapitalize</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">autofocus</span>: <span class="literal">false</span></span><br><span class="line"><span class="attr">baseURI</span>: <span class="string">&quot;file:///G:/blog/source/_posts/index.html&quot;</span></span><br><span class="line"><span class="attr">childElementCount</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">childNodes</span>: <span class="title class_">NodeList</span> [text]</span><br><span class="line"><span class="attr">children</span>: <span class="title class_">HTMLCollection</span> []</span><br><span class="line"><span class="attr">classList</span>: <span class="title class_">DOMTokenList</span> [<span class="attr">value</span>: <span class="string">&quot;&quot;</span>]</span><br><span class="line"><span class="attr">className</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">clientHeight</span>: <span class="number">21</span></span><br><span class="line"><span class="attr">clientLeft</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">clientTop</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">clientWidth</span>: <span class="number">1275</span></span><br><span class="line"><span class="attr">contentEditable</span>: <span class="string">&quot;inherit&quot;</span></span><br><span class="line"><span class="attr">dataset</span>: <span class="title class_">DOMStringMap</span> &#123;&#125;</span><br><span class="line"><span class="attr">dir</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">draggable</span>: <span class="literal">false</span></span><br><span class="line"><span class="attr">elementTiming</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">enterKeyHint</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">firstChild</span>: text</span><br><span class="line"><span class="attr">firstElementChild</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">hidden</span>: <span class="literal">false</span></span><br><span class="line"><span class="attr">id</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">innerHTML</span>: <span class="string">&quot;This is ele 2&quot;</span></span><br><span class="line"><span class="attr">innerText</span>: <span class="string">&quot;This is ele 2&quot;</span></span><br><span class="line"><span class="attr">inputMode</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">isConnected</span>: <span class="literal">true</span></span><br><span class="line"><span class="attr">isContentEditable</span>: <span class="literal">false</span></span><br><span class="line"><span class="attr">lang</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">lastChild</span>: text</span><br><span class="line"><span class="attr">lastElementChild</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">localName</span>: <span class="string">&quot;p&quot;</span></span><br><span class="line"><span class="attr">namespaceURI</span>: <span class="string">&quot;http://www.w3.org/1999/xhtml&quot;</span></span><br><span class="line"><span class="attr">nextElementSibling</span>: p</span><br><span class="line"><span class="attr">nextSibling</span>: p</span><br><span class="line"><span class="attr">nodeName</span>: <span class="string">&quot;P&quot;</span></span><br><span class="line"><span class="attr">nodeType</span>: <span class="number">1</span></span><br><span class="line"><span class="attr">nodeValue</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">nonce</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">offsetHeight</span>: <span class="number">21</span></span><br><span class="line"><span class="attr">offsetLeft</span>: <span class="number">8</span></span><br><span class="line"><span class="attr">offsetParent</span>: body</span><br><span class="line"><span class="attr">offsetTop</span>: <span class="number">90</span></span><br><span class="line"><span class="attr">offsetWidth</span>: <span class="number">1275</span></span><br><span class="line"><span class="attr">onabort</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onanimationend</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onanimationiteration</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onanimationstart</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onauxclick</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onbeforecopy</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onbeforecut</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onbeforepaste</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onbeforexrselect</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onblur</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oncancel</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oncanplay</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oncanplaythrough</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onchange</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onclick</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onclose</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oncontextmenu</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oncopy</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oncuechange</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oncut</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondblclick</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondrag</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondragend</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondragenter</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondragleave</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondragover</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondragstart</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondrop</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ondurationchange</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onemptied</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onended</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onerror</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onfocus</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onformdata</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onfullscreenchange</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onfullscreenerror</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ongotpointercapture</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oninput</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">oninvalid</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onkeydown</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onkeypress</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onkeyup</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onload</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onloadeddata</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onloadedmetadata</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onloadstart</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onlostpointercapture</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onmousedown</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onmouseenter</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onmouseleave</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onmousemove</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onmouseout</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onmouseover</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onmouseup</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onmousewheel</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpaste</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpause</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onplay</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onplaying</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointercancel</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointerdown</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointerenter</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointerleave</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointermove</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointerout</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointerover</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointerrawupdate</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onpointerup</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onprogress</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onratechange</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onreset</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onresize</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onscroll</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onsearch</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onseeked</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onseeking</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onselect</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onselectionchange</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onselectstart</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onstalled</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onsubmit</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onsuspend</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ontimeupdate</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ontoggle</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ontransitioncancel</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ontransitionend</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ontransitionrun</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">ontransitionstart</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onvolumechange</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onwaiting</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onwebkitanimationend</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onwebkitanimationiteration</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onwebkitanimationstart</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onwebkitfullscreenchange</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onwebkitfullscreenerror</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onwebkittransitionend</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">onwheel</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">outerHTML</span>: <span class="string">&quot;&lt;p&gt;This is ele 2&lt;/p&gt;&quot;</span></span><br><span class="line"><span class="attr">outerText</span>: <span class="string">&quot;This is ele 2&quot;</span></span><br><span class="line"><span class="attr">ownerDocument</span>: <span class="variable language_">document</span></span><br><span class="line"><span class="attr">parentElement</span>: div.<span class="property">wrap</span></span><br><span class="line"><span class="attr">parentNode</span>: div.<span class="property">wrap</span></span><br><span class="line"><span class="attr">part</span>: <span class="title class_">DOMTokenList</span> [<span class="attr">value</span>: <span class="string">&quot;&quot;</span>]</span><br><span class="line"><span class="attr">prefix</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">previousElementSibling</span>: p</span><br><span class="line"><span class="attr">previousSibling</span>: p</span><br><span class="line"><span class="attr">scrollHeight</span>: <span class="number">21</span></span><br><span class="line"><span class="attr">scrollLeft</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">scrollTop</span>: <span class="number">0</span></span><br><span class="line"><span class="attr">scrollWidth</span>: <span class="number">1275</span></span><br><span class="line"><span class="attr">shadowRoot</span>: <span class="literal">null</span></span><br><span class="line"><span class="attr">slot</span>: <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">spellcheck</span>: <span class="literal">true</span></span><br><span class="line"><span class="attr">style</span>: <span class="title class_">CSSStyleDeclaration</span> &#123;<span class="attr">alignContent</span>: <span class="string">&quot;&quot;</span>, <span class="attr">alignItems</span>: <span class="string">&quot;&quot;</span>, <span class="attr">alignSelf</span>: <span class="string">&quot;&quot;</span>, <span class="attr">alignmentBaseline</span>: <span class="string">&quot;&quot;</span>, <span class="attr">all</span>: <span class="string">&quot;&quot;</span>, …&#125;</span><br><span class="line">(...)</span><br><span class="line"><span class="attr">timeStamp</span>: <span class="number">5829.630000051111</span></span><br></pre></td></tr></table></figure>

<h3 id="事件类型"><a href="#事件类型" class="headerlink" title="事件类型"></a>事件类型</h3><h4 id="UI事件"><a href="#UI事件" class="headerlink" title="UI事件"></a>UI事件</h4><ol>
<li>load</li>
<li>resize</li>
<li>scroll</li>
</ol>
<h4 id="焦点事件"><a href="#焦点事件" class="headerlink" title="焦点事件"></a>焦点事件</h4><ol>
<li>focus</li>
<li>blur</li>
<li>focusin &#x3D;&gt; 等价focus，但是它会冒泡</li>
<li>blurout &#x3D;&gt; 等价blur，但是它会冒泡</li>
</ol>
<h4 id="鼠标与滚轮事件"><a href="#鼠标与滚轮事件" class="headerlink" title="鼠标与滚轮事件"></a>鼠标与滚轮事件</h4><ol>
<li>click</li>
<li>dbclick</li>
<li>mousedown</li>
<li>mouseup</li>
<li>mouseenter</li>
<li>mouseleave</li>
<li>mouseout</li>
</ol>
<h4 id="键盘与文本事件"><a href="#键盘与文本事件" class="headerlink" title="键盘与文本事件"></a>键盘与文本事件</h4><ol>
<li>keydown</li>
<li>keypress</li>
<li>keyup</li>
</ol>
<h4 id="变动事件"><a href="#变动事件" class="headerlink" title="变动事件"></a>变动事件</h4><ol>
<li>beforeunload：用户关闭标签页</li>
<li>DOMContentLoaded：在形成完整DOM树之后会触发，不会理会图像、js、css等资源是否已经下载完毕</li>
</ol>
<h4 id="设备事件"><a href="#设备事件" class="headerlink" title="设备事件"></a>设备事件</h4><ol>
<li>orientationchange：屏幕转动</li>
</ol>
<h4 id="触摸与手势事件"><a href="#触摸与手势事件" class="headerlink" title="触摸与手势事件"></a>触摸与手势事件</h4><h5 id="触摸"><a href="#触摸" class="headerlink" title="触摸"></a>触摸</h5><ol>
<li>touchstart</li>
<li>touchend</li>
<li>touchmove</li>
<li>touchcancel</li>
</ol>
<p>🚨 Notice：以上事件event 对象中包含的常见 DOM 属性有：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey。</p>
<h5 id="手势"><a href="#手势" class="headerlink" title="手势"></a>手势</h5><ol>
<li>gesturestart：当一根手指在屏幕上，另一根手指有触摸屏幕时</li>
<li>gesturechange：触摸屏幕的任何一根手指位置发生变化</li>
<li>gestureend：任何一根手指从屏幕上移开</li>
</ol>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">#知识体系</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/%E6%80%BB%E7%BB%93/">#总结</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/JS/">#JS</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/JS-WEB-API/">#JS-WEB-API</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/05/11/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(Ajax)/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-JS-WEB-API(Ajax)</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/05/08/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS-WEB-API(DOM%E3%80%81BOM)/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-JS-WEB-API(DOM、BOM)</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
